<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>3元以上的水果</p>
    <!-- 性能优化：如果使用v-if，每次循环都需要判断，性能差；使用计算属性，返回最终的计算结果，不需要判断，性能更好 -->
    <p v-for="(item, index) in list2" :key="index">
      <span>名称：{{item.name}}</span>
      <span>价格：{{item.price}}</span>
      <span>数量：{{item.num}}</span>
      <span>小计：{{item.num * item.price}}</span>
    </p>
    <p>总价：{{total}}</p>
    <p>watch和computed的对比：
      1.watch只有在数据变化时才会执行；computed依赖缓存，如果数据变了，就重新计算
      2.多个因素共同作用，得出结果，使用computed；一个因素的变化会引起多重影响，使用watch
    </p>
    <p>methods和computed的对比：
      1.methods调用几次就执行几次；computed无论调用几次，只要原数据不变，就执行一次，从缓存中读取数据；
      2.methods调用时带括号，computed不需要括号
    </p>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        list: [
          {name: 'apple', price: 5, num: 3},
          {name: 'banana', price: 4, num: 4},
          {name: 'peach', price: 3, num: 3},
        ]
      },
      computed: {
        // 3元以上的水果
        list2() {
          return this.list.filter(item => {
            return item.price > 3
          })
        },
        total: {
          // 设置计算属性
          set() {
            console.log('set');
          },
          // 获取计算属性,默认使用get
          get() {
            console.log('get');
            let num = 0;
            this.list2.forEach(element => {
              num += element.price * element.num
            });
            return num
          }
        }
      }
    })
  </script>
</body>
</html>